<template>
  <div>
    vue2.0监听属性和删除属性
    <br />
    <button @click="ageAdd">年龄+1</button>
    <button @click="ediAge">删除年龄</button>
    <br />
    这个是age:{{ people.age }}
    <br />
    <span>line-height</span><br />
    <span>{{ people.name }}</span>
    <hr />
    <div @mousemove="flagFun" class="flag">
      节流<br />
      {{ num }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: {
        name: "张三",
        age: 0,
      },
      show: {},
      num: 0,
    };
  },
  methods: {
    ageAdd() {
      this.people.age++;
    },
    ediAge() {
      // 这个操作watch监听不到
      delete this.people.age;
    },
    flagFun() {
      var timer;
      return function() {
        console.log(2132132131313213);
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log(312312);
        }, 1000);
      };
    },
  },
  watch: {
    people: {
      handler() {
        console.log(123);
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.flag {
  width: 200px;
  height: 200px;
  background: brown;
}
</style>
